import Vue from 'vue'
import Vuex from 'vuex'
import {getRequest} from "../utils/api";
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
import {Notification} from "element-ui";

Vue.use(Vuex);

const now = new Date();

const store = new Vuex.Store({
  // 数据存放的位置
  state: {
    // 路由菜单
    routes: [],
    // sessions 中定义的数据保存模式为 admin#libai（from#to），即 admin 发送给 libai 的消息队列
    sessions: [],
    // 聊天列表
    hrs: [],
    // 当前选中的用户数据
    currentSession: null,
    // 当前登录对象
    currentHr: JSON.parse(window.sessionStorage.getItem("user")),
    filterKey: '',
    stomp: null,
    idDot:{}
  },
  // 相当于方法
  mutations: {
    // 这个方法在调用的时候可以只传 data 参数。保存 router 数据
    initRoutes(state, data) {
      state.routes = data;
    },
    // 将选中的用户进行保存
    changeCurrentSession(state, currentSession) {
      //
      Vue.set(state.idDot, state.currentHr.username + '#' + currentSession.username, false)
      // 赋值
      state.currentSession = currentSession;
    },
    // 添加消息内容
    addMessage(state, msg) {
      // 获取消息数组
      let mss = state.sessions[state.currentHr.username + '#' + msg.to];
      // 如果 state.sessions为null ,则添加数组
      if (!mss) {
        // 由于 ‘from#to’数据原本在state.sessions中不存在，要想实现数据的动态绑定（当个地方数据变化，整体都变化）
        // 需要使用 Vue.set 继续赋值。
        // 参数1：保存的数据位置，参数2：数据名（key），参数3：数据（value）
        Vue.set(state.sessions, state.currentHr.username + '#' + msg.to, [])
      }
      // 添加数据
      state.sessions[state.currentHr.username + '#' + msg.to].push({
        // 消息内容
        content: msg.content,
        // 消息时间
        date: new Date(),
        //
        self: !msg.notSelf
      })
    },
    // 初始化读取本地历史记录
    INIT_DATA(state) {
      // 浏览器本地的历史聊天记录可以在这里完成
      let data = localStorage.getItem('vue-chat-session');
      if (data) {
        state.sessions = JSON.parse(data);
      }
    },
    // 初始化 hr
    INIT_HR(state, data) {
      state.hrs = data;
    }
  },
  actions: {
    // 获取聊天hr列表
    initData(context) {
      context.commit('INIT_DATA')
      getRequest("/chat/hrs").then(resp => {
        if (resp) {
          context.commit('INIT_HR', resp)
        }
      })
    },
    // 建立连接
    connect(context) {
      //  '/ws/ep' 为服务端 webSocket 配置的连接点
      context.state.stomp = Stomp.over(new SockJS('/ws/ep'));
      // 建立连接
      context.state.stomp.connect({}, success => {
        // 连接成功，可以在这里获取聊天内容,参数1 为服务端 webSocket 配置的消息队列（需要手动添加user）
        context.state.stomp.subscribe('/user/queue/chat', msg => {
          // 获取消息内容
          let receiveMsg = JSON.parse(msg.body);
          // 如果用户没有选中任何聊天用户 或者 用户选中的聊天用户不是新发来的消息用户，则将消息进行提示
          if (!context.state.currentSession || receiveMsg.from != context.state.currentSession.username) {
            // 通过 element-ui 的 Notification 进行消息弹窗
            Notification.info({
              title: '【' + receiveMsg.fromNickname + '】发来一条消息',
              message: receiveMsg.content.length > 10 ? receiveMsg.content.substr(0, 10) : receiveMsg.content,
              position: "bottom-right"
            });
            // 添加红点
            Vue.set(context.state.idDot, context.state.currentHr.username + '#' + receiveMsg.from, true);
          }
          // 不是当前用户发送的消息
          receiveMsg.notSelf = true;
          receiveMsg.to = receiveMsg.from;
          context.commit('addMessage',receiveMsg)
        })


      }, errorr => {

      })
    }
  }
})

store.watch(function (state) {
  return state.sessions
}, function (val) {
  console.log('CHANGE: ', val);
  localStorage.setItem('vue-chat-session', JSON.stringify(val));
}, {
  deep: true/*这个貌似是开启watch监测的判断,官方说明也比较模糊*/
})

export default store;